<template>
  <div id="login">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="loginface">
      <img src="../../assets/img/login.png" alt="" />
      <div class="loginform">
        <img src="../../assets/img/orange.png" alt="" />
        <i>优 质 甄 选 · 高 枕 无 忧</i>
        <p class="p1">
          <el-input
            placeholder="请输入用户名"
            v-model="form.username"
          ></el-input>
        </p>
        <p>
          <el-input placeholder="请输入密码" v-model="form.password"></el-input>
        </p>
        <button @click="login">登录</button>
      </div>
    </div>
  </div>
</template>

<script>
import { userlogin } from "../../requset/api";
import { successAlert, warningAlert } from "../../util/alert.js";
import {mapActions} from "vuex"
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    ...mapActions({
      reqChangeUser:"reqChangeUser"
    }),
    login() {
      userlogin(this.form).then((res) => {
        if (res.data.code == 200) {
          successAlert(res.data.msg)
          this.reqChangeUser(res.data.list)
          this.$router.push("/")
        }else{
          warningAlert(res.data.msg)
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../less/index.less");
#login {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(@color1, @color2);
  position: relative;
  overflow: hidden;
  .circle {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: linear-gradient(rgb(255, 86, 52), rgba(255, 86, 52, 0));
    &:nth-child(1) {
      position: absolute;
      left: 25%;
      top: 36%;
    }
    &:nth-child(2) {
      width: 100px;
      height: 100px;
      margin: 15px 0 0 300px;
    }
    &:nth-child(3) {
      width: 200px;
      height: 200px;
      margin: 20px 0 0 -100px;
    }
    &:nth-child(4) {
      width: 150px;
      height: 150px;
      margin-left: 92%;
      margin-top: -22%;
    }
  }
  .loginface {
    width: 750px;
    position: absolute;
    right: 10%;
    top: 5%;
    img {
      width: 750px;
      height: 550px;
    }
    .loginform {
      position: absolute;
      right: 6%;
      top: 20%;
      background: linear-gradient(#fff, #fff4f2);
      text-align: center;
      i {
        font-size: 16px;
        color: #858181;
        letter-spacing: 5px;
        display: block;
        margin-top: 15%;
      }
      img {
        height: 90px;
        width: 340px;
        margin: auto;
      }
      p {
        width: 100%;
        &.p1 {
          margin-top: 15%;
        }
        /deep/ input {
          width: 100%;
          height: 30px;
          border: none;
          border-bottom: 1px solid #f24231;
          background-color: #fff4f2;
          margin-top: 5%;
        }
      }
      button {
        width: 100%;
        height: 36px;
        background-color: #f24231;
        border: none;
        border-radius: 20px;
        color: #fff;
        letter-spacing: 20px;
        margin-top: 10%;
      }
    }
  }
}
</style>